<template>
  <div id="login">
    <!-- <i class="iconfont icon-logo"></i> -->
    <i class="iconfont icon-toupiao"></i>
    <group id="account" title="账 号">
      <x-input type="text" v-model="formLogin.account"></x-input>
    </group>
    <group title="密 码">
      <x-input type="password" v-model="formLogin.password"></x-input>
    </group>
    <group class="bottom">
      <x-button @click.native="onSubmit()" :disabled="formLogin.account.length==0||formLogin.password.length==0" type="primary">登 录</x-button>
    </group>
    <a id="go2modifyPassword" href="http://18.191.16.200:10080/#/modifyPassword">前往账号自助服务平台</a>
  </div>
</template>

<style lang='less'>
#login {
  padding: 2.5rem 2rem 0 2rem;
  #account {
    margin-top: 2.5rem;
  }
  .iconfont {
    color: @theme-color;
    vertical-align: middle;
    &.icon-toupiao {
      font-size: 2.5rem;
    }
  }
  #go2modifyPassword {
    line-height: 3rem;
  }
  .bottom {
    .weui-cells:after {
      border-bottom: none;
    }
    .weui-cells:before {
      border-top: none;
    }
  }
}
</style>

<script>
import { mapActions } from "vuex";
import { XInput, Group, XButton } from "vux";

export default {
  name: "Login",
  components: {
    XInput,
    XButton,
    Group
  },
  data() {
    return {
      formLogin: {
        account: "",
        password: ""
      }
    };
  },
  methods: {
    ...mapActions(["reqGetAccessToken"]),
    onSubmit() {
      let password = require("crypto")
        .createHash("sha1")
        .update(this.formLogin.password)
        .digest("hex");
      this.reqGetAccessToken({ ...this.formLogin, password });
    }
  }
};
</script>
